/** * Create by mzq * Description: 用户性别年龄分布图 * Date: 2024/9/13 13:06 * Update: 2024/9/13
13:06 */
<template>
  <div id="LeftUserGenderAndAgeChart"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'

// 男性数组
const manArr = ref([])

// 女性数组
const womanArr = ref([])

const props = defineProps({
  reqData: {
    type: Object
  }
})

let options = {
  tooltip: {
    trigger: 'axis',

    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {
    textStyle: {
      color: '#fff'
    }
  },
  grid: {
    left: '0',
    right: '0%',
    bottom: '0%',
    top: '10%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    show: false,
    axisLine: {
      show: false
    }
  },
  yAxis: {
    type: 'category',
    axisLine: {
      show: false,
      lineStyle: {
        color: '#fff'
      }
    },
    axisTick: {
      show: false
    },
    data: ['20岁以下', '20-30岁', '30-40岁', '50-60岁', '70-80岁', '80岁以上']
  },
  series: [
    {
      name: '男',
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      emphasis: {
        focus: 'series'
      },
      data: manArr.value,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#015EEA'
          },
          {
            offset: 1,
            color: '#00C0FA'
          }
        ])
      }
    },
    {
      name: '女',
      type: 'bar',
      stack: 'total',
      label: {
        show: false
      },
      emphasis: {
        focus: 'series'
      },
      data: womanArr.value,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: '#F090F4'
          },
          {
            offset: 1,
            color: '#F75A72'
          }
        ])
      }
    }
  ]
}

const init = () => {
  let myChart = echarts.init(document.getElementById('LeftUserGenderAndAgeChart'))
  myChart.setOption(options, true)

  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

watch(
  () => props.reqData,
  (val) => {
    for (let i = 0; i < val.todayReport.ageCount.length; i++) {
      manArr.value.push(val.todayReport.ageCount[i].man)
      womanArr.value.push(val.todayReport.ageCount[i].woman)
    }

    init()
  }
)
</script>
<style scoped lang="scss">
#LeftUserGenderAndAgeChart {
  width: 1.078125rem /* 207/192 */;
  height: 1.3542rem /* 260/192 */;
}
</style>
